<template>
	<view>
		<view class="m-title">
			<text>我的点评</text>
		</view>
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index">
				<view class="m-user">
					<view class="m-user-image">
						<image v-if="item.user.image" :src="item.user.image" mode=""></image>
						<image v-else src="@/static/center/center-logo.png" mode=""></image>
					</view>
					<view class="m-user-content">
						<view class="m-user-font1">
							<text>{{item.user.nickname}}</text>
						</view>
						<view class="m-user-font2">
							<text>{{item.dtTime}}</text>
						</view>
					</view>
					<view class="">
						<text class="m-user-score">{{item.pingjia_star}}</text>
					</view>
				</view>
				<view class="m-content">
					<text>{{item.content}}</text>
				</view>
				<view class="m-image">
					<view class="m-image-item"  v-for="(val,key) in item.image" @click="$m.previewImage(item.image,key)">
						<image :src="val" mode="aspectFill"></image>
					</view>
				</view>
				<view class="m-info">
					<view class="m-info-left">
						<view class="m-info-font1 u-line-1">
							<text>{{item.hotal}}</text>
						</view>
						<view class="m-info-font2 u-line-1">
							<text>{{get_date('MM月DD日',item.startTime)}} 至 {{get_date('MM月DD日',item.endTime)}} {{item.night_num}}晚 {{item.home.title}} {{item.num}}间</text>
						</view>
					</view>
					<view class="">
						<text class="m-info-right">{{item.price}}</text>
					</view>
				</view>
			</view>
			<uni-load-more :status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import {get_date,get_timestamp} from "@/common/function/tools.js"
	export default {
		data() {
			return {
				list:[],
				loading:'loading',
				params:{
					page:1,
					pagenum:10,
					userID:'',
					type:1
				}
			}
		},
		computed:{
			getCountComputed(){
				return (item)=>{
					let start = get_timestamp(item.startTime)
					let end = get_timestamp(item.endTime)
					let count = (end - start) / 24/60/60
					return count
				}
			}
		},
		onLoad() {
			this.params.userID = uni.getStorageSync('user_id')
			this.getListFun()
		},
		onReachBottom() {
			if(this.loading == 'loading' || this.loading == 'noMore') return false;
			this.getListFun()
		},
		methods: {
			get_date,
			getListFun(){
				let params = this.params
				this.loading = 'loading'
				this.$http.getJson('hotal_commentList',params).then(res=>{
					if(res.code == 1){
						let data = res.data || []
						let len = data.length
						if(len > 0){
							this.list= this.list.concat(data)
						}
						if(len == params.limit){
							this.params.page += 1
							this.loading = 'more'
						}else{
							this.loading = 'noMore'
						}
					}else{
						this.$m.msg(res.msg)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss">
.m-title{
	font-size: 32rpx;
	color: #34302D;
	font-weight: 600;
	padding: 30rpx 25rpx 10rpx;
}
.m-list{
	padding: 0 25rpx;
	.m-item{
		padding: 30rpx 0;
		border-bottom: 1px solid #E6E2DE;
		.m-user{
			display: flex;
			align-items: center;
			.m-user-image{
				image{
					width: 72rpx;
					height: 72rpx;
					flex-shrink: 0;
					border-radius: 50%;
				}
			}
			.m-user-content{
				padding-left: 24rpx;
				flex: 1;
				.m-user-font1{
					font-size: 26rpx;
					color: #222222;
					font-weight: 600;
				}
				.m-user-font2{
					font-size: 22rpx;
					color: #ADA9A5;
					margin-top: 4rpx;
				}
			}
			.m-user-score{
				font-size: 48rpx;
				color: #D3A358;
				&::after{
					content: '分';
					font-size: 24rpx;
					margin-left: 5rpx;
				}
			}
		}
		.m-content{
			padding-top: 20rpx;
			font-size: 24rpx;
			color: #222222;
			line-height: 34rpx;
		}
		.m-image{
			display: flex;
			flex-wrap: wrap;
			padding-top: 20rpx;
			.m-image-item{
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				&:nth-child(4n){
					margin-right: 0;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}
		}
		.m-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: #F6F6F6;
			border-radius: 20rpx;
			padding: 20rpx;
			.m-info-left{
				width: 500rpx;
				.m-info-font1{
					font-size: 28rpx;
					color: #33302D;
					font-weight: 600;
				}
				.m-info-font2{
					font-size: 24rpx;
					color: #9B958F;
					line-height: 33rpx;
					margin-top: 8rpx;
				}
			}
			.m-info-right{
				font-size: 40rpx;
				color: #DE2C38;
				&::before{
					content: '￥';
					font-size: 24rpx;
				}
			}
		}
	}
}
</style>
